﻿<%@ Page Title="" Language="C#" MasterPageFile="~/skin.Master" AutoEventWireup="true" CodeBehind="rankadvanced.aspx.cs" Inherits="DataShow.rank.rankadvanced" %>


<asp:Content ID="headers" ContentPlaceHolderID="home_header" runat="server">
    <link rel="stylesheet" href="/css/compiled/form-showcase.css" type="text/css" media="screen" />
    <link href="/css/lib/bootstrap.datepicker.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        label {
            display:inline-block;margin-bottom:10px;
        }
        #sendpoints {
            display:inline-block;
            height:18px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="cph_home" runat="server">
    <div style="margin-top: 10px;">
        <ul class="breadcrumb">
            <li><a href="/Index.aspx">首页</a> <span class="divider">/</span></li>
            <li class="active">预报员排名</li>
        </ul>
    </div>
   
    <div class="row-fluid" id="tip" style="display: none">
        <div>当前进度：步骤(<span id="sp_current_step"></span>/<span id="sp_total_step"></span>),<span id="sp_message"></span>,已用时：<span id="sp_time_out"></span><span>秒</span>,大概剩余时间：<span id="sp_need_time"></span><span>秒</span></div>
        <div class="progress progress-striped active">
            <div class="bar" style="width: 00%;"></div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>功能栏</h5>
                </div>
                <div class="widget-content nopadding">
                    <div class="field-box inline">
                        <label>开始日期:</label>
                        <asp:TextBox runat="server" ID="date_begin" ClientIDMode="Static" CssClass="input-large datepicker" />
                    </div>
                    <div class="field-box inline">
                        <label>结束日期:</label>
                        <asp:TextBox runat="server" ID="date_end" ClientIDMode="Static" CssClass="input-large datepicker" />

                    </div>
                    <div class="field-box inline">
                        <label>发报时刻:</label>
                        <asp:CheckBoxList runat="server" ID="sendpoints" ClientIDMode="Static" RepeatColumns="3" RepeatDirection="Horizontal" RepeatLayout="Table" >
                            <asp:ListItem Text="H06" Value="H06"></asp:ListItem>
                            <asp:ListItem Text="H10" Value="H10"></asp:ListItem>
                            <asp:ListItem Text="H16" Value="H16"></asp:ListItem>
                        </asp:CheckBoxList>
                    </div>
                    <input type="button" id="btn_search" class="btn-primary btn" value="搜索" style="margin-bottom:10px;" />
                    <input type="button" class="btn btn-link" value="返回基本搜索" id="jiben" />
                </div>
            </div>
        </div>

    </div>
    <div class="row-fluid">
        <div class="span12">
            <div class="widget-box" style="margin-top: 0">
                <div class="widget-title">
                    <span class="icon">
                        <i class="icon-plus"></i>
                    </span>
                    <h5>搜索结果</h5>
                </div>
                <div class="widget-content nopadding">
                    <table class="table table-hover">
                        <tr>
                            <th>预报员</th>
                            <th>排名</th>
                            <th>48H晴雨</th>
                            <th>48H一般性降水</th>
                            <th>48HTMax2C</th>
                            <th>48HTMin2C</th>
                            <th>48H晴雨</th>
                            <th>48HT一般性降水</th>
                            <th>48HTMax2C</th>
                            <th>48HTMin2C</th>
                            <th>综合分</th>
                            <th>样本数</th>
                            <th>达标次数</th>
                        </tr>
                        <tbody id="mainTable"></tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

</asp:Content>
<asp:Content runat="server" ID="scripts" ContentPlaceHolderID="home_script">
    <script src="/js/bootstrap.datepicker.js"></script>
    <script src="../js/rank.js"></script>
    <script type="text/javascript">

        //产生GUID
        function guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }

        $("#jiben").click(function () {
            location.href = 'forecasterrank.aspx';
        })
        var tid;


        var readswitch;
        //更新程序后台执行状态
        function Tip(tid) {
            $("#tip").fadeIn();
            $(".bar").css("width", "0%");
            readswitch = setInterval(ReadStatus, 3000);
        }
        //读取程序执行状态
        function ReadStatus() {
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                url: "<%:StatusInterface%>" + "?tid=" + tid + "&action=query",
                success: function (data) {
                    if (data.success == "True") {
                        var result = data.result.data;
                        for (key in result) {
                            $("#sp_" + key).text(result[key]);

                        }
                        $("#sp_need_time").text(((result.total_step - result.current_step) / result.current_step * result.time_out).toFixed(2));
                        $(".bar").css("width", result.current_step / result.total_step * 100 + "%");
                    } else {
                        errorTimes++;
                        if (errorTimes >= 5) {
                            alert(data.msg);
                        }
                    }
                }
            })
        }

        var errorTimes;

        $(function () {
            $("td>input").css("margin", '0');
            $("td>label").css("margin", '0');
            // datepicker plugin
            $('.datepicker').datepicker({format:'yyyy-mm-dd'}).on('changeDate', function (ev) {
                $(this).datepicker('hide');
            });

            $("#btn_search").click(function () {
                var begindate = $("#date_begin").val();
                var enddate = $("#date_end").val();
                var sendpoints = new Array();
                $("input[type='checkbox']").each(function () {
                    if (this.checked) {
                        sendpoints.push($(this).val());
                    }
                })
                if (sendpoints.length == 0) {
                    alert("请选择发报时刻");
                    return;
                }
                var tids = "";
                $("#tip").show();
                $.get("ReadAllForecastersHandler.ashx", "", function (data) {
                    tid = guid();
                    tids = data;
                    tids = tids.substring(tids.indexOf("[") + 1, tids.lastIndexOf("]"));
                    Tip("");
                    $.ajax({
                        type: "GET",
                        url: "<%:Interface %>?forecasters="+tids+"&begindate="+begindate+"&enddate="+enddate+"&sendpoints="+sendpoints.reverse().join(',')+"&semitype=Auto&tid="+tid,
                        dataType: "jsonp",
                        success: function (data) {
                            $("#tip").hide();
                            if (data.success == "True") {
                                FillTable(data);

                            }
                            else {
                                alert(data.msg)
                            }
                            clearInterval(readswitch);
                            errorTimes = 0;
                            $(".bar").css("width", "0%");
                        }
                    })

                })

            })

        });
    </script>
</asp:Content>
